/* Base color */
@dialogBorderColor: rgb(82, 118, 180);//窗口的边框颜色
@shadowColor:rgba(0, 0, 0,0.3);//窗口的阴影
@frontButColor:#4961A3;//鼠标移动到按钮上的默认颜色
@dangerHoverColor:#FF5050;//关闭窗口按钮的颜色

/*窗口的标题栏高度*/
@heard-h:1.5rem;
@full-heade-h:1.2rem;

/*默认的窗口尺寸大小*/
@defaultWidth: 24rem;
@defaultHeight: 16rem;

@hrColor:#ACACAC;//hr的默认颜色

*{
	padding: 0;
	margin: 0;
	font-size: inherit;
}
hr{
	//水平线的默认样式
	width: 0;
	border: none;
	border-left: 1px solid @hrColor;
}
html {
	font-size: 20px;
	box-sizing: content-box;//基准盒模型
}
body {
	font-size: 0.6rem;
	font-family: 'Microsoft YaHei';
}

.oc-dialog,.oc-alert,.oc-file{
	width: @defaultWidth;
	height: @defaultHeight;
	border: 1px @dialogBorderColor solid;
	box-shadow: 0px 0px 10px 2px @shadowColor;
	overflow: hidden;
	position: fixed;
	background-color: #fff;
	&>header{
		width: 100%;
		height: @heard-h;
		line-height: @heard-h;
		label{
			margin-left: 0.35rem;
			font-size: 0.6rem;
		}
		i,button,hr{
			display: block;
			width: @button-h-20;
			float: left;
			margin-left: 0.3rem;
			background-position: center;
			background-repeat: no-repeat;
			.vertical-center(@heard-h,1rem);
		}
		hr{
			width: 0;
			.vertical-center(@heard-h,0.6rem);
		}
		button:hover{
			border: none;
		}
	}
	&>nav{
		//窗口右上角的按钮组
		position:absolute;
		right:  0;
		top: 0;
		height: @heard-h;
		button{
			display: block;
			width: 2.25rem;
			height:1.5rem;
			float: left;
			background-position: center;
			background-color: transparent;
			border: none;
			&:hover{
				background-color:@bottonBG;
			}
		}
		button.danger:hover{
	        background-image: url("");
			background-color:@dangerHoverColor;
		}
		&:after{
			content: "";
			display: block;
			clear: both;
		}
	}
	&>section{
		width: 100%;
		height: auto;
		position: absolute;
		top: @heard-h;
		bottom: 0;
		>*{
			position: absolute;
		}
	}
}
/*撑满的窗口*/
.oc-dialog.full {
	width: 100%;
	height: 100%;
	border: none;
	box-shadow: none;
	&> header{
		height:@full-heade-h;
		line-height: @full-heade-h;
		button,i{
			.vertical-center(@full-heade-h,1rem);
		}
		hr{
			.vertical-center(@full-heade-h,0.6rem);
		}
	}
	&>nav{
		height: @full-heade-h;
		button{
			height: @button-h-22;
		}
	}
	&>section{
		top: @full-heade-h;
	}
}

/*-------block--遮罩的样式------*/
.oc-dialog.block:after,.oc-file.block:after{
	content: "";
	position:absolute;
	display: block;
	top: -10%;
	bottom:-10%;
	left: -10%;
	right: -10%;
	background-color:rgba(0, 0, 0,0.1);
	z-index: 50;
}
/*--------alert窗口固定样式---------*/
.oc-alert{
	width:15rem;
	height:8rem;
	section{
		background-color: #f2f2f2;
		text-align: center;
		pre{
			//alert窗口的提示信息显示区域
			left: 0.3rem;
			right: 0.3rem;
			top: 0.6rem;
			bottom: 2rem;
			text-align: center;
		}
		button{
			height:1.4rem;
			width:4.4rem;
			bottom: 0.3rem;
			left: 50%;
		}
		.confirm{
			margin-left: -4.6rem;
		}
		.cancel{
			margin-left: 0.2rem;
		}
	}
}
/*--------file窗口的固定样式--------*/
.oc-file{
	width: 24rem;
	height: 16rem;
    &>section{
        background-color:#F2F2F2;
        &>.oc-toolbar{
            width: 100%;//覆盖默认的超长宽度
            &>input.filter{
                float: right;
            }
        }
    }
	input.fileName {
		width: 20rem;
		bottom: 0.3rem;
		left: 0.3rem;
	}
	button.fn{
		width: 3.1rem;
		height: 1.1rem;
		bottom: 0.3rem;
		right: 0.3rem;
	}
	.oc-list{
		top: 1.5rem;
		left: 0px;
		right: 0px;
		border: solid rgb(204, 204, 204);
		border-width: 1px 0;
		bottom: 1.7rem;
	}
}
.grid{
	position: relative;
	width: 100%;
	height: 100%;
	>*{
		position: absolute;
	}
	>.grid{//解决grid嵌套默认宽高100%的覆盖问题
		width: auto;
		height: auto;
	}
}